<template>
	<view class="content page" :style="{ '--color': color, '--colors': colors }">
		<status-bar :title="title"></status-bar>
		<backTop v-if="toTop"></backTop>
		<view class="nav_top_box" :style="{ top: navHeight + System.statusBarHeight + 'px' }">
			<view class="navlists" :class="navTab == 520 ? 'navAction thmeColor' : ''" @click="navclick(520, 0)">
				<text>全部</text>
			</view>
			<view class="navlists" :class="navTab == 0 ? 'navAction thmeColor' : ''" @click="navclick(0, 1)"><text>待完成</text></view>

			<view class="navlists" :class="navTab == 1 ? 'navAction thmeColor' : ''" @click="navclick(1, 2)"><text>已完成</text></view>

			<view class="Advertising_article thmeBg" :style="{ '--color': color, left: 33.33 * positions + '%' }"></view>
		</view>

		<view class="discount_coupon_list">
			<view class="reList">
				<view class="reItem" v-for="(item, index) in pageData" :key="index">
					<view class="d-flex j-sb">
						<text class="reName">{{ item.sncode_prize_name }}</text>
						<text class="reState" v-if="item.sncode_flag == 0" @click="getCode(item.sncode_sn, item.sncode_src, index, item.sncode_id)">待完成</text>
						<text class="reState" v-if="item.sncode_flag == 1">已完成</text>
						<text class="reState" v-if="item.sncode_flag == 2">未通过</text>
						<text class="reState" v-if="item.sncode_flag == 3">审核中</text>
						<text class="reState" v-if="item.sncode_flag == 4">已撤回</text>
						<view
							class="bgcolor white bor_radius_10"
							style="padding: 6px 6px"
							v-if="item.sncode_flag == 5"
							@click.stop="nowPlay(item.sncode_id, item.jump_pay, item.jump_url)"
						>
							待支付
						</view>
						<view class="bgcolor white bor_radius_10" style="padding: 6px" v-if="item.sncode_flag == 6" @click="openForm(item)">待补充资料</view>
					</view>
					<view class="size26 m-top10 color_80" @click="showPop(item, 1)">{{ item.user_name }}</view>
					<view class="size26 m-top10 color_80" @click="showPop(item, 1)">{{ item.sncode_user_mobi }}</view>
					<view class="flex-box flex-between align-center" @click="showPop(item, 1)">
						<view class="row j-sb a-center">
							<view class="reTime">{{ item.sncode_addtime }}</view>
							<u-rate :count="5" v-model="item.user_rating" gutter="1" readonly v-if="item.user_rating != 0"></u-rate>
						</view>
						<view class="flex-box align-center">
							<view class="qxbtn" @click.stop="qxbtn(index, item.sncode_id)" v-if="item.sncode_flag == 0 || item.sncode_flag == 5 || item.sncode_flag == 6">
								撤回
							</view>
							<view class="qxbtn white btnConfig" v-if="item.sncode_flag == 0">核销码</view>
						</view>
					</view>

					<view class="row j-sb a-center overload" v-if="item.sncode_flag == 1">
						<view class="contnet d-flex f-column j-sb">
							<view class="rows ellipsis color_99" v-if="item.sncode_content">{{ item.sncode_content }}</view>
							<text class="color_99">{{ item.sncode_usedtime }}</text>
						</view>
						<view class="evaluation" @click="showPop(item, 2)" v-if="item.user_rating == 0">服务评价</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 提货码弹窗 start  @click="getCode(item.sncode_sn,item.sncode_src,index,item.sncode_id)"-->
		<view class="mask flex-box flex-center align-center" v-if="getCodes" @click="getCode1">
			<view @click.stop class="pickup_code_pop">
				<view class="bgwhite bor_radius_10">
					<view class="pickup_code_box p-top20 p-bot20">
						<view class="txt">核销二维码</view>
						<image :src="$imgUrls(items.sncode_src)" class="code-img" mode="aspectFit"></image>
						<view class="num">{{ items.sncode_number }}</view>
						<view class="info m-top10">到达活动现场后，出示该二维码核销。</view>
					</view>
					<view class="row f-column p-left50">
						<view class="row m-bot20" v-for="(item, index) in items.sncode_remark" :key="index">
							<view class="viewTitles">{{ item.title }}</view>
							<view>：{{ item.value }}</view>
						</view>
					</view>
				</view>

				<view @click="getCode1">
					<text class="iconfont icon-guanbi"></text>
				</view>
			</view>
		</view>

		<showModel v-if="showModal" @cancelFunc="showModal = false" type="99" @certain="delSure" title="是否确定取消预约？" msg="  " btn1="点错了" btn2="我很确定"></showModel>

		<empty v-if="nothing" type="1" cat="3" msg="还没有相关数据哦~"></empty>
		<view class="DiLine" v-if="showline">------ 我是有底线的 ------</view>

		<u-popup :show="show" @close="show = false" mode="center" closeable round="10">
			<view class="viewbox p-top20 p-bot30 popViewBox">
				<block v-if="isState == 1">
					<view class="popcode auto d-flex f-column a-center">
						<image :src="$imgUrls(items.sncode_src)" class="codeImg" v-if="items.sncode_flag == 0"></image>
						<text class="size30 black bold">{{ items.sncode_number }}</text>
					</view>
					<view class="row f-column p-left50 m-top20">
						<view class="row m-bot20" v-for="(item, index) in items.sncode_remark" :key="index">
							<view class="viewTitles">{{ item.title }}：</view>
							<view v-if="item.isImg">
								<image class="imgs" :src="$imgUrls(img)" mode="aspectFill" v-for="img in item.value" :key="img"></image>
							</view>
							<view v-else>{{ item.value }}</view>
						</view>
					</view>
					<view class="rows padding20" v-if="items.sncode_flag == 1">
						<view class="overStr overStrbg">
							<view class="color_99" v-if="items.sncode_content">{{ items.sncode_content }}</view>
							<view class="color_99 m-top10">{{ items.sncode_usedtime }}</view>
						</view>
					</view>
				</block>

				<view class="rows" v-if="isState == 2">
					<view class="rows padding20">
						<view class="overStr">
							<view class="color_99" v-if="items.sncode_content">{{ items.sncode_content }}</view>
							<view class="color_99 m-top10">{{ items.sncode_usedtime }}</view>
						</view>
					</view>
					<view class="row j-centert">
						<u-rate :count="count" v-model="rating" size="30" gutter="1"></u-rate>
					</view>

					<view class="rows padding20">
						<textarea v-model="evaluate" placeholder="请输入服务评价" class="textarea" />
					</view>
					<view class="row j-centert m-top20">
						<view class="subMit flexac white" @click="subMit">提交评价</view>
					</view>
				</view>

				<view class="rows" v-if="isState == 3">
					<view class="row f-column p-left50 m-top20">
						<view class="row m-bot20" v-for="(item, index) in items.sncode_remark" :key="index">
							<view class="viewTitles">{{ item.title }}</view>
							<view>：{{ item.value }}</view>
						</view>
					</view>
					<view class="rows padding20">
						<view class="overStr overStrbg">
							<view class="color_99" v-if="items.sncode_content">{{ items.sncode_content }}</view>
							<view class="color_99 m-top10">{{ items.sncode_usedtime }}</view>
						</view>
					</view>

					<view class="row j-centert">
						<u-rate :count="5" v-model="items.user_rating" size="30" gutter="1" readonly></u-rate>
					</view>

					<view class="row j-centert padding20">{{ items.user_evaluate }}</view>

					<view class="row j-centert p-left20 color_99">
						{{ $common.timeFormat(items.user_rating_time, 'Y-M-D h:m:s') }}
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 补充表单 -->
		<u-popup :show="showForm" :round="10" @close="cancelForm">
			<formList v-if="form_list" :ids="form_list" info="false" @cancel="cancelForm(1)"></formList>
		</u-popup>
	</view>
</template>
<script>
import { mapState } from 'vuex';
var timer, that;
import formList from '@/components/formList.vue';
export default {
	components: {
		formList
	},
	data() {
		return {
			title: '我的记录',
			colors: getApp().globalData.color_aid,
			navTab: 520,
			positions: 0,

			Advertising_article_style: '',
			pageData: '',
			nothing: false,
			pageindex: 1,
			bottomtip: false,
			showline: false,
			toTop: false,

			staticUrl: this.staticUrl,
			slideId: '', // 点开表单id
			getCodes: false, // 是否显示二维码弹窗
			codeImg: '',
			pickCode: '',
			qxindex: '', //取消预约按钮索引
			showModal: false,
			sncode_id: '',
			palyInfo: {},
			items: '',
			show: false,
			count: 5,
			rating: 2,
			evaluate: '',
			sncode_type: '',
			isState: 1, // 1 未核销 2 未评价 3 已评价
			showForm: false,
			form_list: '',
			order_id: ''
		};
	},

	onBackPress() {
		clearInterval(timer);
	},
	onLoad(e) {
		that = this;
		if (e.order_id) this.order_id = e.order_id;
		that.getPageData('', 0);
	},
	onShow() {
		let options = wx.getEnterOptionsSync();
		if (options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3') {
			let extraData = options.referrerInfo.extraData;
			if (!extraData) return;
			if (extraData.code == 'success') {
				this.pageindex = 1;
				this.getPageData('', 0);
			}
		}
	},

	methods: {
		getPageData(status, type) {
			that.$http
				.post({
					url: '/zzj_singleSaleApi/getCustomFormList',
					data: {
						jsCode: that.vid,
						sncode_type: status, // 状态 0待审核 1已完成 2审核未通过
						page: that.pageindex,
						size: 10,
						VeriCode: that.bid,
						order_id: that.order_id
					}
				})
				.then((res) => {
					if (res.code != 100) return;
					const data = res.data.formList ? res.data.formList : [];
					if (res.data.title) this.title = res.data.title;
					data.forEach((item, index) => {
						if (item.sncode_remark.length > 0) {
							item.sncode_remark.forEach((sn, i) => {
								if (sn.value && sn.value.indexOf('/Uploads') > -1 && sn.value.indexOf('.') > -1) {
									sn.isImg = true;
									sn.value = sn.value.split('，');
								}
							});
						}
					});
					that.nothing = false;
					this.pageindex == 1 ? (that.pageData = data) : (that.pageData = [...that.pageData, ...data]);
					that.bottomtip = data.length < 10 ? false : true;
					if (!that.pageData.length) that.nothing = true;

					uni.hideLoading();
				});
		},
		showPop(item, index) {
			this.rating = 0;
			this.items = item;
			this.show = true;
			if (item.sncode_flag == 0 && item.user_rating == 0) return (this.isState = 1);
			if (item.sncode_flag == 1 && item.user_rating == 0) {
				if (index == 1) return (this.isState = 1);
				if (index == 2) return (this.isState = 2);
			}
			if (item.sncode_flag == 1 && item.user_rating != 0) return (this.isState = 3);
		},
		subMit() {
			if (this.rating == 0) return this.$Toast('请评价星数~');
			this.$http
				.post({
					url: '/zzj_singleSaleApi/evaluateOnlineOrder',
					data: {
						VeriCode: this.bid,
						sncode_id: this.items.sncode_id,
						evaluate: this.evaluate,
						rating: this.rating
					}
				})
				.then((res) => {
					this.show = false;
					if (res.code != 100) return this.$Toast(res.data);
					this.$Toast(res.data);
					this.pageindex = 1;
					this.getPageData(that.sncode_type, that.positions);
				});
		},
		nowPlay(sncode_id, pay, url) {
			let that = this;
			if (pay == 1) {
				window.open(res.url);
			} else {
				uni.showLoading({
					title: '加载中~',
					mask: true
				});
				that.$http
					.post({
						url: '/accountPay/getSncodePay',
						data: {
							sncode_id: sncode_id
						}
					})
					.then((res) => {
						if (res.code != '100') return this.$Toast(res.msg);
						that.palyInfo = res.data;
						if (that.palyInfo.extraData) {
							wx.openEmbeddedMiniProgram({
								appId: that.palyInfo.appId,
								extraData: that.palyInfo.extraData
							});
						} else {
							uni.getProvider({
								service: 'payment',
								success(resp) {
									uni.requestPayment({
										provider: resp.provider[0],
										orderInfo: {
											sncode_id: sncode_id
										},
										timeStamp: that.palyInfo.timeStamp,
										nonceStr: that.palyInfo.nonceStr,
										package: that.palyInfo.package,
										signType: that.palyInfo.signType,
										paySign: that.palyInfo.paySign,
										success(re) {
											uni.showToast({
												title: '支付成功',
												mask: true,
												icon: 'none',
												success() {
													setTimeout(() => {
														uni.navigateBack({
															delta: 1
														});
													}, 800);
												}
											});
										},
										fail(err) {
											uni.navigateBack({
												delta: 1
											});
										}
									});
								}
							});
						}
					});
			}
		},

		prev(i, imgArry) {
			if (imgArry) {
				let arr = [];
				for (let i in imgArry) {
					arr.push(that.$imgUrls(imgArry[i]));
				}
				uni.previewImage({
					current: i,
					urls: arr,
					indicator: 'number',
					loop: true
				});
			}
		},
		getCode: function (item) {
			/**
			 * 获取提货码
			 * **/

			that.getCodes = true;
			this.items = item;
			// that.pickCode = code;
			// that.codeImg = imgSrc;
			timer = null;
			timer = setInterval(function () {
				that.$http
					.post({
						url: '/SRA_CustomerForm/getCustomFormState',
						data: {
							sncode_id: sncodeid,
							VeriCode: that.bid
						}
					})
					.then((res) => {
						if (res.code != 100) return;
						that.getCodes = false;
						if (that.navTab == 520) {
							// 如果当前是全部订单则修改当前订单状态，其他状态则删除该条订单
							that.pageData[index].sncode_flag = res.data;
						} else {
							that.pageData.splice(index, 1);
							if (that.pageData.length < 1) {
								that.nothing = true;
							}
						}
						that.pageData = [].concat(that.pageData);
						clearInterval(timer);
					});
			}, 2000);
		},
		getCode1() {
			that.getCodes = false;
			clearInterval(timer);
		},
		showSlide(id) {
			if (that.slideId == id) {
				that.slideId = -1;
			} else {
				that.slideId = id;
			}
		},
		navclick(i, positions) {
			var param = i;
			that.sncode_type = i;
			that.navTab = i;
			that.slideId = -1;
			if (i == 520) {
				param = '';
				that.sncode_type = '';
			}
			that.pageindex = 1;
			that.bottomtip = false;
			that.showline = false;
			that.positions = positions;
			that.getPageData(param, 0);
		},

		delSure() {
			that.$http
				.post({
					url: '/zzj_singleSaleApi/cancelOnlineOrder',
					data: {
						VeriCode: that.bid,
						sncode_id: that.sncode_id
					}
				})
				.then((res) => {
					if (res.code == 100) {
						uni.showToast({
							icon: 'none',
							title: res.data
						});
						that.showModal = false;
						if (that.navTab == 520) {
							// 如果当前是全部订单则修改当前订单状态，其他状态则删除该条订单
							that.pageData[that.qxindex].sncode_flag = 4;
						} else {
							that.pageData.splice(that.qxindex, 1);
							if (that.pageData.length < 1) {
								that.nothing = true;
							}
						}
					}
					if (res.code == 101) {
						uni.showToast({
							icon: 'none',
							title: res.data
						});
					}
				});
		},
		// 取消预约按钮
		qxbtn(index, sncode_id) {
			that.qxindex = index;
			that.sncode_id = sncode_id;
			that.showModal = true;
		},
		openForm(item) {
			this.form_list = [{ order_id: item.wzn_act_id, sncode_id: item.sncode_id }];
			this.showForm = true;
		},
		cancelForm(reset) {
			this.showForm = false;
			this.form_list = '';
			if (reset) {
				this.pageindex = 1;
				this.getPageData(this.sncode_type);
			}
		}
	},

	computed: {
		...mapState(['tabTitle', 'color', 'city', 'navHeight', 'System', 'share', 'bid', 'vid'])
	},
	onReachBottom() {
		if (that.bottomtip) {
			uni.showLoading({
				mask: true,
				title: '列表加载中...'
			});
			that.pageindex = that.pageindex + 1;
			that.getPageData(that.navTab, 1);
		}
	},
	onPageScroll(e) {
		if (e.scrollTop > 100) {
			that.toTop = true;
		} else {
			that.toTop = false;
		}
	},
	onShareAppMessage(res) {
		let share = this.share;
		return {
			title: share.title,
			desc: share.desc,
			path: `/pages/index/index?share_v_id=${this.vid}&pageType=999`,
			imageUrl: `${share.imageUrl}`
		};
	}
};
</script>

<style scoped lang="scss">
.page {
	background-color: #f8f8f8;

	.pickup_code_pop {
		position: relative;
		width: 600upx;

		padding-top: 30rpx;

		.pickup_code_box {
			width: 100%;
			height: 100%;

			.txt {
				text-align: center;
				padding: 10upx 0;
				font-size: 32upx;
			}

			.code-img {
				width: 440upx;
				height: 440upx;
				display: block;
				margin: 20rpx auto;
				background-color: #f8f8f8;
			}

			.num {
				text-align: center;
				font-size: 32rpx;
				color: #00a4ee;
			}

			.info {
				font-size: 20upx;
				color: #888888;
				text-align: center;
			}
		}

		.icon-guanbi {
			color: white;
			font-size: 60rpx;
			top: 20rpx;
			position: relative;
			z-index: 3;
		}
	}
}

.nav_top_box {
	width: 100%;
	height: 80upx;
	background: #ffffff;
	display: flex;
	line-height: 80upx;
	text-align: center;
	font-size: 28upx;
	color: #888888;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
}

.navlists {
	width: 33.33%;
}

.navAction {
	position: relative;
}

.Advertising_article {
	width: 33.33%;
	height: 4upx;
	position: absolute;
	bottom: 0;
	left: 0;
	transition: left 0.2s;
}

.discount_coupon_list {
	width: 100%;
	padding-top: 80upx;
}

.expire {
	font-size: 20upx;
}

.reItem {
	background: white;
	margin-top: 20upx;
	padding: 24upx 30upx;
}

.reName {
	color: #3a3a3a;
	font-size: 32upx;
}

.reTime {
	color: #888888;
	font-size: 28upx;
	line-height: 65upx;
}

.qxbtn {
	line-height: 46rpx;
	text-align: center;
	background-color: #f5f5f5;
	padding: 0 20rpx;
	width: 130rpx;
	margin-left: 20rpx;
	border-radius: 50rpx;
}

.btnConfig {
	background-color: var(--color);
}

.reState {
	float: right;
	color: #888888;
	font-size: 28upx;
}

.reTip {
	font-size: 20upx;
	color: #3a3a3a;
	margin-top: 20upx;
	position: relative;
	border-top: 2upx solid #e2e2e2;
	padding-top: 20upx;
}

.tipTime {
	color: #888888;
	font-size: 20upx;
	margin-top: 10upx;
}

.reArrow {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateX(-50%);
	width: 23upx;
	height: 12upx;
	transition: all 0.3s;
}

.reMsg {
	height: 0;
	overflow: hidden;
	box-sizing: border-box;
	transition: all 0.3s;
	border-top: 1px solid transparent;
}

.slideShow {
	height: auto;
	transition: all 0.3s;
	border-top: 1px solid #e2e2e2;
	margin-top: 20upx;
}

.trRotate {
	transform: rotate(180deg);
	transform-origin: 6upx 6upx;
	transition: all 0.3s;
}

.reMsg > view {
	display: flex;
	margin-top: 20upx;
}

.msgName {
	color: #8d8d8d;
	font-size: 24upx;
	min-width: 140upx;
	text-align: right;
}

.img-box {
	flex-wrap: wrap;
	width: 100%;
	padding-top: 10rpx;

	.msgImg {
		width: 150rpx;
		height: 150rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}
}

.msgDetail {
	color: #3a3a3a;
	font-size: 24upx;
	flex: 1;
}

.viewTitles {
	width: 120rpx;
	text-align-last: justify;
}

.overload {
	background-color: rgba(255, 204, 153, 0.3);
	padding: 16rpx 10rpx;
	border-radius: 8rpx;
}

.evaluation {
	background-color: var(--color);
	padding: 10rpx 20rpx;
	border-radius: 30rpx;
	color: #ffffff;
}

.popViewBox {
	max-height: 1100rpx;
	overflow: scroll;
}

.contnet {
	width: 500rpx;
}

.popcode {
	width: 500rpx;
}

.codeImg {
	width: 500rpx;
	height: 500rpx;
	display: block;
}

.overStr {
	// background-color:rgba(255, 204, 153, 0.3);
	padding: 16rpx 10rpx;
	border-radius: 8rpx;
}

.overStrbg {
	background-color: rgba(255, 204, 153, 0.3);
}

.textarea {
	width: 100%;
	height: 200rpx;
	border: 1px solid #cccccc;
	border-radius: 10rpx;
	padding: 10rpx;
	font-size: 24rpx;
}

.subMit {
	width: 320rpx;
	height: 80rpx;
	background-color: var(--color);
	border-radius: 40rpx;
	font-size: 26rpx;
}
.imgs {
	width: 160rpx;
	height: 160rpx;
	margin: 0 10rpx 10rpx 0;
}
</style>
